<template>
    <div class="fav-component">
        <div class="edit-pic-con">
            <div class="left-img">
                <span class="img-box">
                    <img loading="lazy" v-imgd="{id:record.id,w:record.sw,uptime:record.updateTime?record.updateTime:0,isimg:true}">
                </span>
            </div>
            <div class="rig-con">
                <div class="fav-header">
                    编辑单图 <a class="close-win" @click="handleClose"></a>
                </div>
                <!-- <div class="textarea-control">
                    <textarea v-model="desc" maxlength="200" placeholder="图集介绍描述（必填）"></textarea>
                    <i>{{desc.length}}/200</i>
                </div> -->
                <div class="tit">
                    转移至其他文件夹
                </div>
                <div class="search-bx">
                    <form @submit.prevent="()=>{return false;}">
                        <input type="text" v-model="searchkey" placeholder="搜索" />
                    </form>
                </div>
                <div class="folders">
                    <div class="folder-item" v-for="(f,idx) in list" :key="idx" v-if="f.show"  @click="handleToSaveFav(f)">
                        <div class="left">
                            <span class="img-box">
                                <img loading="lazy" :src="f.thumbnailList[0]" alt="" v-if="f.thumbnailList&&f.thumbnailList.length>0">
                            </span>
                            <span class="title-text" :title="f.title">{{f.title}}</span>
                        </div>
                        <a class="fav-btn">收藏</a>
                    </div>
                </div>
                <a class="create-new-folder" @click="showCreate=true">
                    新建单图文件夹
                </a>
                <div class="bot-btns">
                    <a class="del-btn" @click="handlCancelFav">移除收藏</a>
                    <!-- <div class="btns">
                        <a class="pro-default-btn"  @click="handleClose">取消</a>
                        <a class="pro-confirm-btn" @click="handleConfirmUpdate">确认</a>
                    </div> -->
                </div>
            </div>
        </div>

        <a-modal v-model="showCreate" destroyOnClose centered :footer="null"  :closable="false" width="450px">
            <CreateFolder @close="onClose" :foldertype="0"/>
        </a-modal>
    </div>
</template>

<script>
import api from '@/api/api'
import CreateFolder from '@/components/CreateFolder'
export default {
    components:{CreateFolder},
    data(){
        return {
            searchkey:'',
            list:[],
            params:{
                pageNum:1,
                pageSize:20,
                orderByColumn:'createTime',
                isAsc:'desc',
                type:0
            },
            desc:'',
            showCreate:false
        }
    },
    watch:{
        searchkey(newd){
            this.list.map(item=>{
                if(item.title.indexOf(newd)>-1){
                    item.show=true;
                }else{
                    item.show=false;item.showOther=false;
                }
            })
        }
    },
    props:['record','ismove'],
    methods:{
        onClose(isrefresh){
            if(isrefresh){
                this.list=[];
                this.queryList();
            }
            this.showCreate=false
        },
        async handleToSaveFav(item){
            let res= await api.batchCancelMoveSinglePic(item.id,[this.record.collectId]);
            if(res.code==0){
                this.$amessage.success('移动成功')
                this.$emit('favsucc')
            }
        },
        async handlCancelFav(){
            let res = await api.batchCancelFavSinglePic([this.record.collectId])
            if(res.code==0){
                this.$amessage.success('取消成功')
                this.$emit('favsucc')
            }
        },
        handleClose(){
            this.$emit('close')
        },
        async queryList(){
            let res=await api.explorerList(this.params);
            // if(this.foldertype==1){
            //     this.params.type=1;
            //     res=await api.getMutiplePicFavs(this.params);
            // }else if(this.foldertype==2){
            //     this.params.type=2;
            //     res=await api.getNewFavFolds(this.params);
            // }else if(this.foldertype==3){
            //     res=await api.getVideoFolders(this.params);
            // }
            // let _typeEnum={

            // }
            res.data.map(item=>{
                item.show=true;
            })
            
            this.list=res.data;
        },
        async handleConfirmUpdate(){
            if(!this.desc){
                this.$amessage.warn('未填写图片描述');
                return;
            }
            let res=await api.addImgTag({id:this.record.imageId,tags:this.record.images.tags,description:this.desc});
            if(res.code==0){
                this.$amessage.success('操作成功');
                this.$emit('close')
            }
        }
    },
    mounted(){
        this.queryList();
    }
}
</script>